<template>
    <el-container class="container">
        <el-aside :width="isCollapse?'':'206px'" style="background-color: rgb(48, 65, 86);transition:width 0.2s ease-out 0.1s">
            <el-scrollbar style="height:100%">
                <el-menu default-active="/admin/index" unique-opened class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                    background-color="#304156" text-color="#fff" active-text-color="#ffd04b" :router="true">
                    <el-menu-item index="/admin">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-news"></i>
                            <span slot="title">新闻管理</span>
                        </template>
                        <el-menu-item index="/admin/news">
                            <span slot="title">新闻列表</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span slot="title">产品管理</span>
                        </template>
                        <el-menu-item index="/admin/product">
                            <span slot="title">产品列表</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-scrollbar>
        </el-aside>
        
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="1">
                        <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" style="font-size:24px" :title="isCollapse?'展开':'折叠'" @click="isCollapse=!isCollapse"></i>
                    </el-col>
                    <el-col :offset="21" :span="2">
                        <el-dropdown>
                            <i class="el-icon-setting" style="margin-right: 15px"></i>
                            <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span>王小虎</span>
                    </el-col>
                </el-row>
            </el-header>
            
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
  data() {
      return {
        isCollapse: false
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style lang="scss" scoped>
.container{
    height: 100vh;
    overflow: hidden;
    /deep/.el-scrollbar__wrap {
        overflow-x: hidden;
    }
    .el-header {
        border-bottom: 1px solid #eee;
        color: #333;
        line-height: 60px;
    }
    
    .el-aside {
        color: #333;
    }
}
</style>